refactor(forms): migrate Input to TS#7762
Draft
talissoncosta wants to merge 7 commits into
Draft
Conversation
Convert Input.js to a typed function component (Input.tsx). React 19 ref-as-prop + useImperativeHandle for the E2E-guarded focus(); drop the unused react-maskedinput dependency and the checkbox/radio delegation. Unify the password/search icon widths and use the colorIconDanger token. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Input no longer delegates type='checkbox' to Checkbox, so the single caller uses <Checkbox> directly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop the bogus DOM InputEvent/KeyboardEvent annotations on Input handlers (React infers the correct synthetic events) and fix a few loose call sites surfaced by typing: JSX passed to the string title, readonly->readOnly, non-boolean isValid, and a boolean value. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
talissoncosta
changed the title
Contributor
Docker builds report
|
Contributor
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
|
Contributor
Visual Regression19 screenshots compared. See report for details. |
4 tasks
Use the named React KeyboardEvent (matching Input.tsx) instead of the React.KeyboardEvent namespace form. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
FieldLabel wires a label to its control (+ required indicator + an info tooltip via the shared LabelWithTooltip); FieldError renders an inline per-field message (counterpart to the ErrorMessage banner). Widen LabelWithTooltip's label to ReactNode. With Storybook stories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the legacy SCSS colour vars on the input field rules with semantic tokens that flip per theme: borders -> --color-border-default/strong/action/ danger/disabled, text -> --color-text-default/secondary/tertiary/disabled, backgrounds -> --color-surface-default. Datepicker/checkbox colours and the _forms.scss input rules are left for the follow-up decomposition. Note: the hover border now maps to --color-border-strong (.24) where it was $basic-alpha-48 (.48) — slightly subtler; no exact .48 token exists. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The active .input-container input.input rule (light + dark override) lived in _forms.scss, so tokenise it to match _input.scss: borders -> --color-border-default/strong/action/danger/success/disabled, text -> --color-text-default/tertiary/disabled, bg -> --color-surface-default. The dark override is kept (not removed) so dark hover/focus stay action- coloured as before, rather than inheriting the light rule's --color-border- strong hover. Non-input rules in this file (.label-switch, label) are untouched pending the _forms.scss decomposition. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #7758
Migrates the
Inputbase component (behind ~94 call sites) fromInput.jsto a typed function component,Input.tsx. Stacked on #7745 (base branchfeat/label-variant-key-ui) — will retarget tomainonce that merges.useImperativeHandleexposing the E2E-guardedfocus()(no-op under E2E, matching the original).react-maskedinputdependency and the checkbox/radio delegation (the one caller renders<Checkbox>directly).colorIconDangertoken instead of a hardcoded hex.InputEvent/KeyboardEventannotations onInputhandlers (React infers the synthetic events) and fixes a few loose usages typing surfaced (JSX in the stringtitle,readonly→readOnly, non-booleanisValid, a booleanvalue).Out of scope (follow-ups): the wrapper-less redesign with
PasswordInput/SearchInput, anInputvariantAPI, theautocomplete→autoCompletealias removal, and the repo-wideInputEvent-annotation cleanup.How did you test this code?
npm run typecheck: 0 new errors vs the base branch (the typedInputremoved one pre-existing error; 976 → 975).npm run lint: clean on all changed files.